import React, { useState,createContext,useEffect } from "react";
import Todolist from "./Todolist";



//! APP->todolist->list & Input 
//! 一个组件内只能有一个默认导出
export const TodolistContext=createContext();
console.log(TodolistContext);//返回对象，对象里面包含consumer，provider

function App() {
    // 控制todolist显示还是隐藏
    const [isShow,setisShow]=useState(true);
    const [list,setList]=useState([1,2,3]);

    const addItem=(val)=>{
        setList([val,...list]);//!异步，下面不能立刻拿到新的值
    }
    
    useEffect(()=>{
        localStorage.setItem('todolist',JSON.stringify(list));
    },[list])
    return (
        <div className="APP">         
                                         {/*简写 list:list 属性名属性值一样可以简写 */}
            <TodolistContext.Provider value={{list,addItem}}>
                <button onClick={()=>setisShow(!isShow)}>显示/隐藏</button>
                {/* {isShow?<Todolist/>:''} */}
                <Todolist/>
            </TodolistContext.Provider>
        </div>
    )
}

export default App;
